<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户管理</title>
<link rel="stylesheet" type="text/css" href="../css/default.css">
<link rel="stylesheet" type="text/css"
	href="../js/jquery-easyui-1.3.5/themes/gray/easyui.css">
<script type="text/javascript"
	src="../js/jquery-easyui-1.3.5/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="../../easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../easyui/demo/demo.css">
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/extends.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script>
	$(function() {
		$("#tt").datagrid({
			height : $("#body").height() - $('#search_area').height() - 5,
			width : $("#body").width(),
			idField : 'id',
			//data: data,
			url : "../../emp/findById.do",
			method : 'get',
			singleSelect : true,
			nowrap : true,
			fitColumns : true,
			rownumbers : true,
			showPageList : false,
			columns : [ [ {
				field : 'no',
				title : '工号',
				width : 100,
				halign : "center",
				align : "center"
			}, {
				field : 'name',
				title : '姓名',
				width : 100,
				halign : "center",
				align : "center"
			}, {
				field : 'email',
				title : '邮箱',
				width : 100,
				halign : "center",
				align : "center"
			}, {
				field : 'phone',
				title : '电话',
				width : 100,
				halign : "center",
				align : "center"
			} ] ],
			toolbar : '#tt_btn',
			pagination : true,
			onDblClickRow : function(rowIndex, rowData) {
				viewDetail(rowData.userId);
			}
		});

		//新增弹出框
		$("#add").on("click", function() {
			$("#dialog").dialog("open").dialog('setTitle', '新增');
			$("#addform").form("clear");
			url = "../../emp/saveEmp.do";
			document.getElementById("hidtype").value = "submit";

		});
		//修改
		$("#update").on("click", function() {
			var row = $('#tt').datagrid('getSelected');
			if (row) {
				$("#dialog").dialog("open").dialog('setTitle', '修改');
				$("#addform").form("clear");
				url = "../../emp/updateEmp.do";
				document.getElementById("hidtype").value = "submit";
				$("#addform").form("load", row);
			}
		});
		//删除
		$("#delete").on("click", function() {
			var row = $('#tt').datagrid('getSelected');
			if (row) {
				$.messager.confirm('提示', '确定删除选中的记录?', function(r) {
					if (r) {
						$.post('../../emp/deleteEmp.do', {
							id : row.id
						}, function(result) {
							if ("1" == result) {
								$.messager.alert("提示信息", "删除成功");
								$("#tt").datagrid('reload');
							} else {
								$.messager.alert("提示信息", "删除失败");
								$("#add").dialog("close");
							}
						}, 'json');
					}
				});
			}
		});

	})

	//保存
	function save() {
		$("#addform").form("submit", {
			url : url,
			onsubmit : function() {
				return $(this).form("validate");
			},
			success : function(result) {
				if ("1" == result) {
					$.messager.alert("提示信息", "操作成功");
					$("#dialog").dialog("close");
					$("#tt").datagrid("load");
				} else {
					$.messager.alert("提示信息", "操作失败");
					$("#dialog").dialog("close");
					$("#tt").datagrid("load");
				}
			}
		});
	}

	//取消
	function cancel() {
		$("#dialog").window("close");
	}

	function viewDetail(date, id) {
		$parent.messager.alert("提示", "查询详细", "info");
	}

	//监听窗口大小变化
	window.onresize = function() {
		setTimeout(domresize, 300);
	};
	//改变表格宽高
	function domresize() {
		$('#tt').datagrid('resize', {
			height : $("#body").height() - $('#search_area').height() - 5,
			width : $("#body").width()
		});
	}
</script>
</head>
<body class="easyui-layout">
	<div id="body" region="center">
		<!-- 数据表格区域 -->
		<table id="tt" style="table-layout:fixed;"></table>
		<!-- 表格顶部工具按钮 -->
		<div id="tt_btn">
			<a href="javascript:void(0)" id="update" class="easyui-linkbutton"
				iconCls="icon-edit" plain="true">修改</a>
		</div>
	</div>
	<div id="dialog" class="easyui-dialog" closed="true"
		buttons="#dlg-buttons" data-options="closed:true,modal:true"
		style="width:350px;height:250px;padding:5px;">
		<div class="ftitle">职员详情</div>
		<form id="addform" name="form" method="post"
			style="margin: 0px auto; text-align: center;padding: 10px;">
			<div class="content">
				<table width="280" border="0" align="center" cellpadding="3">
					<tr>
						<td width="80" align="right"><label for="no"><span
								class="x">*</span>工号：</label>
						</td>
						<td width="200"><input type="text" name="no" id="no" readonly />
						</td>
					</tr>
					<tr>
						<td align="right"><label for="name"><span class="x">*</span>姓名：</label>
						</td>
						<td><input type="text" name="name" id="name" readonly />
						</td>
					</tr>
					<tr>
						<td align="right"><label for="email"><span class="x">*</span>邮箱：</label>
						</td>
						<td><input type="text" name="email" id="email" />
						</td>
					</tr>
					<tr>
						<td align="right"><label for="phone"><span class="x">*</span>电话：</label>
						</td>
						<td><input type="text" name="phone" id="phone" />
						</td>
					</tr>
				</table>
			</div>
			<!-- 弹出框按钮 -->
			<div class="windowButton">
				<a id="addEmp_add" class="easyui-linkbutton my-dialog-button"
					plain="true" icon="icon-ok" href="javascript:void(0)"
					onclick="save()">保存</a> <a id="addEmp_cancel"
					class="easyui-linkbutton my-dialog-button" plain="true"
					icon="icon-cancel" href="javascript:void(0)" onclick="cancel()">取消</a>
			</div>
			<input type="hidden" name="action" id="hidtype" /><input
				type="hidden" name="id">
		</form>
	</div>
</body>
</html>
